<template>
  <div class="addDoctor">
    <el-form ref="ruleForm" :model="sendMsg" :rules="rules">
      <!-- 医生基本信息 -->
      <div>
        <div class="addDoctorTitle">医生基本信息</div>
        <div class="flexSpace" style="padding: 32px 0 0 0">
          <!-- 上传头像 -->
          <div style="">
            <!-- 上传头像啊 -->
            <el-form-item prop="avatar">
              <el-upload
                class="avatar-uploader"
                :action="uploadImgUrl"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeUpload"
                name="file"
                :data="dataObj"
                :disabled="readOnly"
              >
                <div
                  v-if="sendMsg.avatar"
                  style="
                    width: 100px;
                    margin-bottom: 16px;
                    border-radius: 50%;
                    overflow: hidden;
                  "
                >
                  <img style="width: 100%" :src="sendMsg.avatar" />
                </div>
                <div v-else style="width: 100px; margin-bottom: 16px">
                  <img style="width: 100%" src="../icon/avator.svg" alt="" />
                </div>
                <el-button class="dialogBtn" v-if="!readOnly" round
                  >上传头像</el-button
                >
              </el-upload>
            </el-form-item>
          </div>
          <!-- 右侧 -->
          <div style="width: 80%">
            <div class="flexSpace" style="padding: 0 0 20px 0">
              <div class="flexLeft">
                <div class="inputTitle">医生编号</div>
                <el-form-item prop="proRuleId">
                  <el-input
                    :disabled="readOnly"
                    v-model="sendMsg.proRuleId"
                    placeholder="请输入内容"
                  ></el-input>
                </el-form-item>
              </div>
              <div class="flexLeft">
                <div class="inputTitle">医生姓名</div>
                <el-form-item prop="doctorName">
                  <el-input
                    v-model="sendMsg.doctorName"
                    :disabled="readOnly"
                    placeholder="请输入内容"
                  ></el-input>
                </el-form-item>
              </div>
            </div>
            <div class="flexSpace">
              <div class="flexLeft">
                <div class="inputTitle">选择性别</div>
                <el-form-item prop="gender">
                  <el-select
                    v-model="sendMsg.gender"
                    :disabled="readOnly"
                    placeholder="请选择"
                    style="width: 172px"
                  >
                    <el-option
                      v-for="item in genderList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
              <div class="flexLeft">
                <div class="inputTitle">移动电话</div>
                <el-form-item prop="mobile">
                  <el-input
                    v-model="sendMsg.mobile"
                    :disabled="readOnly"
                    placeholder="请输入内容"
                  ></el-input>
                </el-form-item>
              </div>
            </div>
          </div>
        </div>
      </div>
      <el-divider></el-divider>
      <!-- 医生职业信息 -->
      <div>
        <div class="addDoctorTitle">医生职业信息</div>
        <div class="flexLeft" style="padding: 16px 0 20px 0; width: 80%">
          <div class="flexLeft" style="padding: 0 85px 0 0">
            <div class="inputTitle">医生职称</div>
            <el-form-item prop="typeCode">
              <el-input
                :disabled="readOnly"
                v-model="sendMsg.typeCode"
                placeholder="请输入内容"
                style="width: 172px"
              ></el-input>
            </el-form-item>
          </div>
          <div class="flexLeft">
            <div class="inputTitle">医生工龄</div>
            <el-form-item prop="practiceYear">
              <el-input
                v-model="sendMsg.practiceYear"
                :disabled="readOnly"
                placeholder="请输入内容"
                style="width: 172px"
              ></el-input>
            </el-form-item>
          </div>
        </div>
      </div>
      <el-divider></el-divider>
      <!-- 医生背景认证 -->
      <div>
        <div class="addDoctorTitle">医生背景认证</div>
        <div class="flexLeft" style="padding: 16px 0 20px 0; width: 80%">
          <div class="flexLeft" style="padding: 0 85px 0 0">
            <div class="inputTitle">罗慕认证</div>
            <el-form-item prop="level">
              <el-select
                :disabled="readOnly"
                v-model="sendMsg.level"
                placeholder="请选择"
                style="width: 172px"
              >
                <el-option
                  v-for="item in luomuLeavel"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="flexLeft">
            <div class="inputTitle">医生背景</div>
            <el-form-item prop="professional">
              <el-select
                :disabled="readOnly"
                v-model="sendMsg.professional"
                placeholder="请选择"
                style="width: 172px"
              >
                <el-option
                  v-for="item in doctorProfessional"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </div>
        </div>
      </div>
      <el-divider></el-divider>
      <!-- 医生工作门诊 -->
      <div>
        <div class="addDoctorTitle">医生工作门诊</div>
        <div>
          <div class="flexLeft" v-if="!readOnly" style="width: 80%">
            <div class="flexLeft" style="flex: 1; padding: 0 85px 0 0">
              <div class="inputTitleNopoint">选择门诊</div>
              <el-select
                v-model="chooseClinicList"
                multiple
                placeholder="请选择"
                style="width: 172px"
                @change="clinicChange"
              >
                <el-option
                  v-for="item in clinicList"
                  :key="item.id"
                  :label="item.clinicName"
                  :value="JSON.stringify(item)"
                >
                </el-option>
              </el-select>
            </div>
            <div style="flex: 1" class="flexLeft">
              <div style="padding: 0 10px 0 0">
                <img src="../icon/eyes.png" alt="" />
              </div>
              <div>隐藏其他工作门诊</div>
            </div>
          </div>
          <div class="flexLeft" style="padding: 23px 0">
            <div class="inputTitleNopoint">已选择:&nbsp;&nbsp;</div>
            <div class="flexLeft">
              <tag
                v-for="(item, index) in chooseClinicList"
                :key="index"
                :mation-str="JSON.parse(item).clinicName"
                @deletFun="clinicDelet(JSON.parse(item))"
              ></tag>
            </div>
          </div>
          <div class="flexLeft" v-if="!readOnly">
            <div class="inputTitleNopoint">当前选择默认诊所:</div>
            <div style="color: #508fcc">
              {{ JSON.parse(chooseClinicList[0]).clinicName }}
            </div>
          </div>
        </div>
      </div>
      <el-divider></el-divider>
      <!-- 医生标签 -->
      <div>
        <div class="addDoctorTitle">医生标签</div>
        <div style="padding: 8px 0 0 0" v-if="!readOnly">
          <el-input
            v-model="tagStr"
            placeholder="输入标签名称,按回车键Enter生成标签"
            @change="tagChange"
          ></el-input>
        </div>
        <div class="flexLeft" style="padding: 20px 0 0 0">
          <div class="inputTitleNopoint">已选择:</div>
          <div class="flexLeft">
            <tag
              v-for="(item, index) in sendMsg.tags"
              :key="index"
              :mation-str="item"
              :state="true"
              @deletFun="tagDelet"
            ></tag>
          </div>
        </div>
      </div>
    </el-form>
  </div>
</template>

<script>
import tag from "./tag";
// 引入请求
import {
  getAliToken,
  getClinicList,
  addDoctor,
  seachDoctorID,
  editDoctor,
} from "@/api/operDocterAdmin";
// import { getDictMap } from '@/api/system/dictDetail';
import { getUUID } from "@/utils/index";
export default {
  components: {
    tag,
  },
  props: [
    "edit",
    "doctorProfessional",
    "genderList",
    "luomuLeavel",
    "doctorId",
    "readOnly",
  ],
  data() {
    var checkPhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("手机号不能为空"));
      } else {
        const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
        console.log(reg.test(value));
        if (reg.test(value)) {
          callback();
        } else {
          return callback(new Error("请输入正确的手机号"));
        }
      }
    };

    return {
      rules: {
        avatar: [{ required: true, message: "请上传头像", trigger: "change" }],
        proRuleId: [
          { required: true, message: "请输入医生编号", trigger: "blur" },
        ],
        doctorName: [
          { required: true, message: "请输入医生姓名", trigger: "blur" },
        ],
        gender: [{ required: true, message: "请选择性别", trigger: "change" }],
        mobile: [{ validator: checkPhone, trigger: "blur" }],
        typeCode: [{ required: true, message: "请输入职称", trigger: "blur" }],
        practiceYear: [
          { required: true, message: "请输入工龄", trigger: "blur" },
        ],
        level: [{ required: true, message: "请选择认证", trigger: "blur" }],
        professional: [
          { required: true, message: "请选择背景", trigger: "change" },
        ],
      },
      imgUrl: "",
      // 上传的地址
      uploadImgUrl: process.env.VUE_APP_LOG_API + "api/aliOSS/uploadfile",

      value: "",
      input: "",
      sendMsg: {
        avatar: "",
        doctorName: "",
        level: "",
        gender: "",
        mobile: "",
        packageRuleId: "",
        practiceYear: "",
        proRuleId: "",
        professional: "",
        receiveType: "",
        tags: [],
        typeCode: "",
        clinicIdList: [],
      },
      dataObj: {
        policy: "",
        signature: "",
        key: "",
        ossaccessKeyId: "",
        dir: "",
        host: "",
      },
      // 诊所下拉数据
      clinicList: [],
      // 已选择诊所
      chooseClinicList: ["{}"],
      tagStr: "",
    };
  },

  mounted() {
    // 获取诊所列表
    this.getClinicListFun();
  },
  methods: {
    // 上传前获取阿里云权限
    beforeUpload(file) {
      const self = this;
      console.log("调用a");
      return new Promise((resolve, reject) => {
        getAliToken()
          .then((response) => {
            // self.uploadImgUrl = response.host;
            console.log(file.name, getUUID());
            self.dataObj.policy = response.policy;
            self.dataObj.signature = response.signature;
            self.dataObj.ossaccessKeyId = response.accessid;
            self.dataObj.key = response.dir + getUUID() + `_${file.name}`;
            self.dataObj.dir = response.dir;
            self.dataObj.host = response.host;
            console.log(self.dataObj);
            resolve(true);
          })
          .catch((err) => {
            console.warn(err);
            reject(false);
          });
      });
    },
    // 上传成功钩子
    handleAvatarSuccess(e) {
      console.log(e);
      this.sendMsg.avatar = e.data.url;
    },
    // 获取诊所列表
    getClinicListFun(req) {
      getClinicList(req).then((e) => {
        this.clinicList = e.content;
        if (!this.edit) {
          // 默认选中项
          this.chooseClinicList = [JSON.stringify(e.content[0])];
          this.sendMsg.clinicIdList = [e.content[1].id];
        } // 如果是编辑状态
        if (this.edit || this.readOnly) {
          const that = this;
          seachDoctorID(this.doctorId).then((doctorMation) => {
            that.sendMsg = doctorMation;
            doctorMation.clinicIdList.forEach((iditem) => {
              that.clinicList.forEach((listItem) => {
                if (iditem === listItem.id) {
                  that.chooseClinicList = [];
                  that.chooseClinicList.push(JSON.stringify(listItem));
                }
              });
            });
          });
        }
      });
    },
    // 诊所选择change事件
    clinicChange(e) {
      console.log(e);
      const arr = e.map((item, index) => {
        // this.sendMsg.clinicIdList.push(JSON.parse(e).id
        return JSON.parse(item).id;
      });
      console.log(arr);
      this.sendMsg.clinicIdList = arr;
      // console.log(this.sendMsg.clinicIdList);
    },
    // 标签回车事件
    tagChange(e) {
      this.sendMsg.tags.push(e);
      this.tagStr = "";
    },
    // 删除标签事件
    tagDelet() {
      this.sendMsg.tags.pop();
    },
    // 删除诊所
    clinicDelet(item) {
      console.log(item);
      this.chooseClinicList.forEach((e, index) => {
        if (JSON.parse(e).id === item.id) {
          this.chooseClinicList.splice(index, 1);
        }
      });
      this.sendMsg.clinicIdList.forEach((e, index) => {
        if (e === item.id) {
          this.sendMsg.clinicIdList.splice(index, 1);
        }
      });
      // this.chooseClinicList.splice(index,1)
      // this.sendMsg.clinicIdList
    },
    // 新增医生接口
    addDoctor() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          addDoctor(this.sendMsg).then((e) => {
            if (e.avatar) {
              this.$emit("getDoctorList");
              this.$emit("closeDialog");
            }
          });
        } else {
          return false;
        }
      });
    },

    // 修改医生方法
    EditDoctorFun() {
      this.sendMsg.id = this.doctorId;
      editDoctor(this.sendMsg).then((e) => {
        console.log(e);
        this.$emit("getDoctorList");
        this.$emit("closeDialog");
      });
    },
  },
};
</script>

<style scoped lang='scss'>
.el-form-item {
  margin: 0 !important;
}
// .avatar-uploader .el-upload {
//   border: 1px dashed #d9d9d9;
//   border-radius: 6px;
//   cursor: pointer;
//   position: relative;
//   overflow: hidden;
// }
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.addDoctor {
  font-size: 14px;

  //   表单标题
  .inputTitle {
    white-space: nowrap;
    padding-right: 32px;
  }
  .inputTitle::before {
    content: " ";
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: #ea5f5f;
    border-radius: 4px;
    margin: 0 4px 2px 0;
  }
  // 不带点的标题
  .inputTitleNopoint {
    white-space: nowrap;
    padding-right: 32px;
    padding: 0 32px 0 12px;
  }
}
</style>
